<template>
    <div class="SafePermissionSystem">
      <div class="input">
        <div style="position: absolute; margin-top: 15.5vh; margin-left: 5.7vw">
          <el-input v-model="input1" placeholder="请输入用户名" type="text" />
        </div>
        <div style="position: absolute; margin-top: 15.5vh; margin-left: 18.2vw">
          <el-input v-model="input2" placeholder="请输入用户ID" type="text" />
        </div>
        <div class="btn" @click="btnClick">
          <span>查询</span>
        </div>
      </div>
      <el-table
        :data="paginatedData"
        :show-header="false"
        :cell-style="{ color: '#fff' }"
        :header-cell-style="{ color: '#fff' }"
        height="56vh"
        style="--el-table-border-color: transparent"
        >>
        <el-table-column align="center">
          <template #default="{ $index }">
            {{ $index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="AA" label="名称" align="center" />
        <el-table-column prop="BB" label="年龄" align="center" />
        <el-table-column prop="CC" label="邮箱" align="center" />
        <el-table-column prop="DD" label="名称" align="center" />
        <el-table-column prop="EE" label="年龄" align="center" />
        <el-table-column prop="FF" label="邮箱" align="center" />
        <el-table-column prop="GG" label="年龄" align="center" />
        <el-table-column prop="HH" label="邮箱" align="center" />
        <el-table-column prop="II" label="年龄" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button
              type="text"
              style="font-size: 0.9vw"
              @click="handleDetails(row)"
              >详情</el-button
            >
            <el-button
              type="text"
              style="color: #f56c6c; font-size: 0.9vw"
              @click="deleteItem(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="data.length"
        layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </template>
  <script setup lang="ts">
  import { ref, computed } from "vue";
  const input1 = ref<string>("");
  const input2 = ref<string>("");
  import { ElMessage } from "element-plus";
  import SafePermissionSystemJson from "./json/SafePermissionSystem.json"; // 替换为你的JSON文件路径
  import ElInput from "../../input.vue"; // 确保路径正确
  interface User {
    name: string;
    age: number;
    email: string;
  }
  const options1 = [
    {
      value: "0",
      label: "票据A",
    },
    {
      value: "1",
      label: "票据A",
    },
  ];
  const data = ref<User[]>(SafePermissionSystemJson);
  const currentPage = ref<number>(1);
  const pageSize = ref<number>(10);
  const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return data.value.slice(start, start + pageSize.value);
  });
  const handleCurrentChange = (page: number) => {
    currentPage.value = page;
  };
  const handleDetails = (row: User) => {
    console.log(row);
  };
  // 删除列表项
  const deleteItem = (row: User) => {
    data.value = data.value.filter((item) => item !== row);
  };
  
  const btnClick = () => {
    ElMessage({
      message: "查询成功",
      type: "success",
      // plain: true,
    });
  };
  </script>
  <style lang="scss" scoped>
  .SafePermissionSystem {
    width: 100%;
    height: 100%;
    background-image: url("../../../assets/image/aqglxt.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .el-table {
      width: 86%;
      position: absolute;
      top: 31.3%;
      left: 6%;
    }
  }
  .btn {
    cursor: pointer;
    width: 8vw;
    height: 4vh;
    margin-left:28.7vw;
    margin-top: 15.5vh;
    /* background: powderblue; */
    position: absolute;
    text-align: center;
    line-height: 3.8vh;
    color: rgb(121, 172, 205);
    font-size: 1vw;
  }
  /*最外层透明*/
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent !important;
  }
  /* 表格内背景颜色 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent !important;
    height: 5vh;
  }
  
  ::v-deep .el-table {
    font-size: 0.9vw !important;
  }
  ::v-deep .el-table .cell {
    height: 3.5vh !important;
    line-height: 3.5vh !important;
  }
  
  ::v-deep .el-table .el-table__row:not(.el-table__row--striped) td {
    border-bottom: none !important;
  }
  .el-pagination {
    position: absolute;
    right: 7vw;
    bottom: 3vh;
    ::v-deep .el-input__wrapper {
      background-color: rgb(3, 51, 96) !important;
      color: #fff !important;
      height: 3vh;
      width: 2vw;
      font-size: 0.9vw;
    }
    ::v-deep .el-pagination__editor.el-input {
      width: 3vw;
    }
    ::v-deep .el-pagination__total {
      color: #fff;
      font-size: 0.9vw;
    }
    ::v-deep .el-pagination__goto {
      color: #fff;
      font-size: 0.9vw;
    }
    ::v-deep .btn-prev {
      background-color: rgb(3, 51, 96) !important;
      color: #fff !important;
      height: 3vh;
      width: 2vw;
      font-size: 0.9vw;
    }
    ::v-deep .btn-next {
      background-color: rgb(3, 51, 96) !important;
      color: #fff !important;
      height: 3vh;
      width: 2vw;
      font-size: 0.9vw;
    }
    :deep .el-pager li {
      background-color: rgb(3, 51, 96) !important;
      color: #fff !important;
      height: 3vh;
      width: 2vw;
      font-size: 0.9vw;
    }
  }
  :deep(.el-input__inner) {
    color: #fff !important;
    font-size: 1vw !important;
    box-shadow: none !important;
  }
  /* 鼠标滑过时不显示边框 */
  :deep(.el-input__wrapper:hover) {
    border: none !important;
    box-shadow: none !important;
  }
  
  /* 点击时不显示边框 */
  :deep(.el-input__wrapper:focus) {
    border: none !important;
    box-shadow: none !important;
  }
  
  :deep(.el-input__wrapper) {
    background-color: transparent !important;
    box-shadow: none !important;
  }
  
  /* 移除 el-select 在 focus 和 active 状态下的边框 */
  :deep(.el-select .el-input .el-input__inner:focus),
  :deep(.el-select .el-input .el-input__inner:active) {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  
  :deep(.el-select .el-input__wrapper.is-focus) {
    box-shadow: none !important;
  }
  
  :deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: none !important;
  }
  </style>
  